import { InjectionKey } from 'vue';
import { createStore, useStore as baseUseStore, Store } from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import { moduleB, StateB } from './module/moduleB';
import { moduleC, StateC } from './module/moduleC';

export interface RootState {
  moduleB: StateB;
  moduleC: StateC;
}

export const key: InjectionKey<Store<RootState>> = Symbol();

export const store = createStore<RootState>({
  modules: {
    moduleB,
    moduleC,
  },
  plugins: [
    createPersistedState({
      key: 'moduleB',
      paths: ['moduleB'],
    }),
  ],
});

// 定义自己的 `useStore` 组合式函数
export function useStoreRoot<T = RootState>() {
  return baseUseStore<T>(key);
}
